<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AutoComplete prerelease example</title>
    <style>
    html {
        background: #fff;
        color: #333;
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
        font-size: 13px;
    }

    #ac-input {
        margin: 5px 0 10px;
        width: 300px;
    }
    </style>
</head>
<body class="yui3-skin-sam">

<!-- <h1>AutoComplete prerelease example</h1>

<p>
This is a simple example of an autocomplete list widget that displays
suggestions from Yahoo! Search. Begin typing a query in the input field below to
see suggestions.
</p> -->

<form id="ac-form" action="http://search.yahoo.com/search" method="get">
    <div id="ac">
        <label for="ac-input">Search:</label><br>
        <input type="text" id="ac-input" name="p">
        <input type="submit" value="Search">
    </div>
</form>

<!--
fuji.jetpants.com provides a combo-hosted version of the latest YUI3 git master
code, but it's for testing only. Please don't use it for production, as it is
not a CDN and will occasionally be unavailable.
-->
<script src="http://fuji.jetpants.com/yui/combo/yui3-dev?build/yui/yui-min.js&amp;build/loader/loader-min.js"></script>
<!-- <script src="../../../../build/yui/yui-min.js"></script> -->
<script>
var Y = YUI({
    comboBase: 'http://fuji.jetpants.com/yui/combo/yui3-dev?',
    combine  : true,
    root     : 'build/'
}).use('autocomplete', 'autocomplete-highlighters', function (Y) {

Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultHighlighter: 'phraseMatch',
    source           : 'select * from search.suggest where query="{query}"'
});

// For easier console tinkering.
Y.ac = Y.one('#ac-input').ac;

});
</script>

</body>
</html>
